<template>
	<view class="ys">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index"
				@click="toPage(`/pages/msg/detail?id=${item.msgId}`)">
				<view class="title">
					<view class="left">
						<!-- 	<i v-if="item.type == 1" class="iconfont icon-baojing red"></i>
						<i v-if="item.type == 2" class="iconfont icon-weixiuzhong orange"></i> -->
						<i class="iconfont icon-liuyan green"></i>
					</view>
					<view class="right">
						<view class="type">
							消息
						</view>
						<view class="time">
							{{item.sendTime}}
						</view>
					</view>
				</view>
				<view class="msg-title">
					{{item.msgTitle}}
				</view>
				<view class="msg">
					<view class="msgli">
						<view class="left">
							消息内容
						</view>
						<view class="right">
							{{item.msgContent}}
						</view>
					</view>

				</view>
				<view class="more">
					<text>查看详情</text>
					<uni-icons type="right" color="#777"></uni-icons>
				</view>
			</view>
			<view class="no-list" v-if="list.length == 0">
				- 暂无数据 -
			</view>
		</view>
	</view>
</template>

<script>
	import {
		msglist
	} from "@/api/api.js"
	export default {
		data() {
			return {
				list: [],
				page: 1,
				last_page: 1,
				msgStatus: 0
			}
		},
		mounted() {
			this.msglist()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.msglist()
			}
		},
		methods: {
			msglist() {
				msglist({
					pageNum: this.page,
					pageSize: 15,
					msgStatus: this.msgStatus,
					msgType: 1
				}).then(res => {
					if (res.code == 200) {
						this.list = this.list.concat(res.data.records)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 0 10px;
		margin-top: 10px;

		.item {
			background: #fff;
			border-radius: 6px;
			margin-bottom: 10px;
			padding: 10px;
			box-sizing: border-box;
			box-shadow: 0 0 2px #00000080;

			.title {
				display: flex;
				align-items: center;

				.left {
					i {
						font-size: 26px;
					}

					.red {
						color: red;
					}

					.orange {
						color: #ff8000;
					}

					.green {
						color: green;
					}
				}

				.right {
					padding-left: 10px;

					.type {
						font-size: 14px;
						font-weight: bold;
					}

					.time {
						font-size: 12px;
						margin-top: 2px;
						color: #a6a6a6;
					}
				}
			}

			.msg-title {
				font-weight: bold;
				margin-top: 15px;
				font-size: 15px;
			}

			.msg {
				margin-top: 10px;

				.msgli {
					display: flex;
					align-items: center;
					padding: 3px 0;
					font-size: 14px;
					color: #888;

					.left {
						width: 80px;
					}
				}
			}

			.more {
				padding-top: 10px;
				border-top: 1px solid #eee;
				font-size: 14px;
				font-weight: bold;
				font-size: 14px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
			}
		}
	}
</style>